// ----------------获取数据并渲染---------------------
function renderCategory() {
  axios.get('/my/category/list').then(res => {
    // console.log(res.data);
    let { status, data } = res.data;
    if (status === 0) {
      let str = '';
      // 遍历服务器返回的数据，取出类别名称和类别别名
      data.forEach(item => {
        str += `<tr>
        <td>${item.name}</td>
        <td>${item.alias}</td>
        <td>
          <button type="button" data-id="${item.id}" data-name="${item.name}" data-alias="${item.alias}" class="layui-btn layui-btn-xs edit">编辑</button>
          <button type="button" data-id=${item.id} class="del layui-btn layui-btn-xs layui-btn-danger">删除</button>
        </td>
      </tr>`;
      });
      // 循环结束，把拼接得到的很多tr放到tbody中
      $('tbody').html(str);
    }
  })
}
// 执行函数
renderCategory();

// ----------------------删除功能--------------------------
$('tbody').on('click', '.del', function () {
  // $(this) 表示删除按钮，不表示tbody
  let id = $(this).data('id');
  // 询问是否要删除?  -- 对于敏感操作，需要加询问
  layer.confirm('您确定要删除吗?', { icon: 3, title: '提示' }, function (index) {
    // do something
    // 如果点击了确定，会执行这里的函数
    axios.get(`/my/category/delete?id=${id}`).then(res => {
      let { status, message } = res.data;
      if (status === 0) {
        layer.msg(message);
        // 更新页面的数据
        renderCategory();
      }
    })
    // 关闭弹层  -- layui代码里自带的，不用管它，留着就行
    layer.close(index);
  });

})

// ----------------------添加功能--------------------------
let addIndex;  // 设置成全局变量以便下面关闭弹层
// 1. 点击添加按钮，出现弹层
$('button:contains("添加类别")').on('click', function () {
  addIndex = layer.open({
    type: 1,
    title: '添加类别',
    // 2. 设置弹出的内容
    // tpl: 取自单词 template 模板
    content: $('#tpl-add').html(), // 内容在HTML中script标签中
    area: ['500px', '250px']
  });

});

// 3. 表单提交，发送ajax请求，完成添加
$('body').on('submit', '#add-form', function (e) {
  e.preventDefault();
  let data = $(this).serialize();  // 必须检查表单元素的 name，必须有name值且与接口对应
  axios.post('/my/category/add', data).then(res => {
    let { status, message } = res.data;
    if (status === 0) {
      layer.msg(message);
      renderCategory();  // 更新页面数据
      layer.close(addIndex);
    }
  })
})


// ----------------------编辑修改功能--------------------------
let editIndex;  // 设置成全局变量以便下面关闭弹层
// 1. 点击编辑按钮，出现弹层
$('tbody').on('click', '.edit', function () {
  // 获取三个自定义属性
  let shuju = $(this).data();
  // 不给 data() 传参，表示获取全部的 data-xxx 属性，正好是对象格式
  // 出现弹层
  editIndex = layer.open({
    type: 1,
    title: '编辑分类类别',
    // 2. 设置弹出的内容
    // tpl: 取自单词 template 模板
    content: $('#tpl-edit').html(), // 内容在HTML中script标签中
    area: ['500px', '250px'],
    // 必须等弹层出来以后，保证表单已经存在了，再数据回填
    success: function () {
      // 3. 数据回填
      // 添加自定义属性，用 data 方法获取内容，进行数据回填
      /* 
      $('#edit-form input[name="name"]').val(name);
      $('#edit-form input[name="alias"]').val(alias);
      $('#edit-form input[name="id"]').val(id);
      */
      // 这里用axios提供的数据回填方法
      // form.val('表单的 lay-filter 属性值','数据，必须是对象格式，对象的键必须等于输入框的name值');
      let form = layui.form;
      form.val('edit', shuju);
    }
  });
})

// 4. 表单提交完成修改
$('body').on('submit', '#edit-form', function (e) {
  e.preventDefault();
  // 收集表单各项值
  let data = $(this).serialize();
  // ajax提交，完成修改
  axios.post(`/my/category/update`, data).then(res => {
    let { status, message } = res.data;
    if (status === 0) {
      layer.msg(message);
      renderCategory();
      // 关闭弹层
      layer.close(editIndex);
    }
  });
})


